<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品类型管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
</head>
<style>
    #box {
        width: 800px;
        height: 50px;
        border: 0px solid red;
    }
    #name_title {
        margin-left: -110px;
    }
    #gname {
        width: 200px;
    }
    #status_div {
        width: 200px;
    }
    #btnSearch {
        margin-left: 40px;
    }
     .layui-table-cell{
         height:60px;
         line-height:60px;
     }
</style>
<body>
<div id="box">
    <div class="layui-inline" style="width: 300px;margin-top: 20px">
        <div class="layui-input-block">
            <label class="layui-form-label" id="name_title" >类型名称:</label>
            <input id="gname" value="" type="text" name="gname"
                   autocomplete="off" class="layui-input" onkeyup="autoSeach(event)">
        </div>
    </div>

    <button id="btnSearch" type="button" class="layui-btn layui-icon" lay-filter="formDemo" style="margin-top: 20px">&#xe615;<span >查询</span></button>
</div>

<table class="layui-hide" id="table" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="eidt" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" >删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
    </div>
</script>

<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>

<script>
    $ = layui.$;

    var table = layui.table;
    layui.use('table', function () {
        var goodsTypeTable = table.render({
            elem: '#table',
            method: "get",
            url: '/admin/GoodsType/fenye',
            toolbar: '#toolbarDemo',
            defaultToolbar:
                ['filter', 'exports', 'print', {
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }],
             title:
                '用户数据表'
            , cols:
                [[
                    {field: '', title: '序号', width: 90, unresize: true, align: 'center',
                        templet: function (d) {
                            return '<div>' + (d.LAY_TABLE_INDEX + 1) + '</div>';
                        }},
                    {field: 'id', title: 'id', width: 150, align: 'center',hide:true},
                    {field: 'gname', title: '类型名称', width: 150, align: 'center'},
                    {field: 'gname_en', title: '英文名称', width: 150, align: 'center',hide: true},
                    {field: 'gname_tai', title: '泰语名称', width: 150, align: 'center',hide: true},
                    {field: 'gname_kh', title: '柬埔寨名称', width: 150, align: 'center',hide: true},
                    {field: 'grade', title: '类型级别', width: 150, align: 'center', sort: true},
                    {field: 'parent_name', title: '上级类型', width: 150, align: 'center',templet:function(d) {return d.parent==null? "" : d.parent.gname}},
                    {field: 'icon', title: "图片", width: "150", align: "center",templet: function (d) {
                            return "<img style='object-fit:contain;' height='60px' src='/"+d.icon+"'>"
                        }},
                    {title: '操作', toolbar: '#barDemo', width: 180, align: 'center'}
                ]],
            page: {
                curr: layui.data("supplier_goodstype_administration_page").index
            },
            done: (res, curr, count) => {
                layui.data("supplier_goodstype_administration_page", {
                    key: 'index',
                    value: curr
                });
            }
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
        });
        const parseJSON_String = (data) => {
            while (data.indexOf("=") != -1) {
                data = data.replace("=", "\":\"");
            }
            while (data.indexOf("&") != -1) {
                data = data.replace("&", "\",\"");
            }
            data = "{" + data + "}";
            data = data.replace("{", "{\"");
            data = data.replace("}", "\"}");
            return data;
        };

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            var ID = data.id;
            layui.data("AdminGoodsTypeData", {
                key: "data",
                value: data
            });
            if (obj.event === "guige") {
                layer.open({
                    type: 2,
                    content: './GoodsType_edit.html',
                    title: "编辑",
                    btn: '关闭全部',
                    yes: function (index) {

                    },
                    area: ['700px', '500px'],
                    btn:
                        ["确定", "取消"]
                });
                return;
            }
            if (obj.event === "delete") {
                layer.confirm('确认删除该类型吗？子类型也将被删除', {
                    btn: ['确定', '取消'] //可以无限个按钮
                    ,btn1: function(index, layero){
                        var msgMovie = layer.load(1);
                        // 按钮【按钮一】的回调
                        $.ajax({
                            type: "post",
                            url: "/admin/GoodsType/delete",
                            data: {
                                id: ID,
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.close(msgMovie);
                                    layer.msg("删除成功",{icon:1,time:1000},function(){
                                        goodsTypeTable.reload({
                                            where: { //设定异步数据接口的额外参数，任意设
                                                gname: $("#gname").val(),
                                            }
                                            ,page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                    });
                                }else{
                                    layer.alert(res.data, {
                                        icon: 2,
                                        skin: 'layer-ext-demo'
                                    })
                                    var  index = layui.layer.load();
                                    layer.close(index);
                                    layer.close(msgMovie);
                                }
                            }
                        });
                        layer.close(msgMovie);
                    },btn2:function(index,layero){

                    }
                });

                return;
            }
            if (obj.event === 'eidt') {
                layer.open({
                    type: 2,
                    content: './GoodsType_edit.html',
                    title: "类型编辑",
                    btn: '关闭全部',
                    yes: function (index) {
                        var body = layer.getChildFrame('body', index);
                        var data = body.find("#f").serialize();
                        data = parseJSON_String(data);
                        var d = JSON.parse(data);
                        console.log(data);
                        $ = layui.$;
                        if (d.icon.trim() == "") {
                            layer.msg("图片没有上传", {
                                icon: 2
                            });
                            return;
                        }
                        if (d.gname.trim() == "") {
                            layer.msg("名称不能为空", {
                                icon: 2
                            });
                            return;
                        }
                        if (d.superior_id == ID) {
                            layer.msg("上级类型不能为自己", {
                                icon: 2
                            });
                            return;
                        }
                        $.ajax({
                            type: "post",
                            url: "/admin/GoodsType/update",
                            data: {
                                id: ID,
                                s: data
                            },
                            success: function (res) {
                                if (res.code==200){
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 2000
                                    }, () => {
                                        location.reload();
                                        layer.closeAll();
                                    });
                                }else{
                                    layer.msg(res.msg, {
                                        icon: 2,
                                        time: 2000
                                    }, () => {
                                        location.reload();
                                        layer.closeAll();
                                    });
                                }

                            }
                        });
                    },
                    area: ['700px', '500px'],
                    btn:
                        ["确定", "取消"]
                });
            }
        });
    });

    function seach(){
        layui.use('table', function () {
            var table = layui.table;
            table.reload('table', {
                where: {
                    gname: $("#gname").val()
                },
                page: {
                    curr: 1
                }
            })
        })
    }

    $("#btnSearch").click(function () {
        seach();
    });

    function autoSeach(event) {
        if(event.which==13)
            seach()
    }

</script>
</body>
</html>